<template>
  <div class="layout-container role-contain" >
    <PageHeader title="角色管理">
      <template #btns>
        <div class="btns common-buttons">
          <el-button type='primary' :icon="Setting" @click="columnvisible = true"  >
            列项配置
          </el-button>
          <el-button type='primary' :icon="Plus" @click="ondialogAddFormVisible">
            添加新角色
          </el-button>
        </div>
      </template>
      <template #search>
        <div class="search">
          <div class="span1">
            <span>角色名称</span>
          </div>
          <el-input v-model.trim="formtable.rolename" autocomplete="off" placeholder="请输入" clearable/>
          <!-- <el-select v-model="formtable.rolename" placeholder="请选择" clearable @clear="getroleSearchlist">
            <el-option 
              v-for="item in category.rolename"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select> -->
          <div class="span1">
            <span>组织机构</span>
          </div>
          <el-input v-model.trim="formtable.institution" autocomplete="off" placeholder="请输入" clearable/>
          <!-- <el-select v-model="formtable.institution" placeholder="请选择" clearable @clear="getroleSearchlist">
            <el-option 
              v-for="item in category.institution"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select> -->
          <el-button type="info" :icon="Search" @click="onQuery({ pageNo: 1 })">搜索</el-button>
          <el-button type="info" @click="onReset">重置</el-button>
        </div>
      </template>
    </PageHeader>
    <!-- 列项配置对话框 -->
    <el-dialog title="列项配置" v-model="columnvisible" width="600" :show-close="false" style="text-align: left;">
      <div>
        <div>选择显示字段</div>
        <br/>
        <div>
          <el-checkbox v-model="showColumn.rolename">角色名称</el-checkbox>
          <el-checkbox v-model="showColumn.description">角色描述</el-checkbox>
          <el-checkbox v-model="showColumn.power">角色权限</el-checkbox>
          <el-checkbox v-model="showColumn.institution">组织机构</el-checkbox>
          <el-checkbox v-model="showColumn.operator">操作人</el-checkbox>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer common-buttons">
          <el-button type="primary" @click="columnvisible = false" >返回</el-button>
          <el-button type="primary" @click="columnvisible = false" >确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 表格 -->
    <div class="layout-container-table">
      <CommonTable 
        :showSelection=false
        v-loading="loading" 
        v-model:page="page"
        :total="total"
        :data="state.tableData"
        @onQuery="onQuery"
        :header-cell-style="{'text-align':'center'}" 
        :cell-style="{'text-align':'center'}" 
        style="width: 100%">
        <el-table-column prop="roleName" label="角色名称" v-if="showColumn.rolename" sortable />
        <el-table-column prop="permission" label="角色权限" v-if="showColumn.power" sortable />
        <el-table-column prop="roleOrg" label="组织机构" v-if="showColumn.institution" sortable />
        <el-table-column prop="remark" label="角色描述" v-if="showColumn.description" sortable />
        <el-table-column label="操作" width="180">
          <!-- <el-row> 不知名原因影响scope获取数据-->
            <template #default="scope">
              <el-button
                link
                size="small"
                @click="onEdit(scope.row)" text>修改</el-button>
              <el-button 
                link
                size="small"
                @click="onCheck(scope.row)" text>查看</el-button>
              <el-button 
                link
                size="small"
                @click="onDelete(scope.row)" text>删除</el-button>
            </template>
          <!-- </el-row>  -->
        </el-table-column>
        <el-table-column prop="createBy" label="操作人" v-if="showColumn.operator"/>
      </CommonTable>
    </div>
    <!-- 添加对话框 -->
    <el-dialog v-model="dialogAddFormVisible" title="角色新增" width="500" :show-close="false" style="text-align: left;">
      <el-form ref="Addformref" :model="Addform" :rules="addrules">
        <el-form-item label="操作人" prop="createBy" :label-width="formLabelWidth" >
          <el-input v-model.trim="Addform.createBy" autocomplete="off" placeholder="请输入" disabled/>
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName" :label-width="formLabelWidth" >
          <el-input v-model.trim="Addform.roleName" autocomplete="off" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="角色描述" prop="remark" :label-width="formLabelWidth" >
          <el-input v-model.trim="Addform.remark" autocomplete="off" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="组织机构" prop="roleOrg" :label-width="formLabelWidth" >
          <el-input v-model.trim="Addform.roleOrg" autocomplete="off" placeholder="请输入"/>
          <!-- <el-select v-model="Addform.institution" placeholder="下拉菜单" clearable >
            <el-option 
              v-for="item in category.institution"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="所需权限" prop="permission" :label-width="formLabelWidth" >
          <el-input v-model.trim="Addform.permission" autocomplete="off" placeholder="请输入"/>
          <!-- <el-select v-model="Addform.power" placeholder="请输入">
            <el-option 
              v-for="item in category.power"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select> -->
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer common-buttons">
          <el-button type="info" @click="dialogAddFormVisible = false;formReset(Addformref);" >返回</el-button>
          <el-button type="info" @click="addrolelist(Addformref)" >确认</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog v-model="dialogEditFormVisible" title="角色编辑" width="500" :show-close="false" style="text-align: left;">
      <el-form ref="Editformref" :model="Editform" :rules="Editrules">
        <el-form-item label="操作人" :label-width="formLabelWidth" prop="updateBy">
          <el-input v-model="Editform.updateBy" autocomplete="off"  disabled/>
        </el-form-item>
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
          <el-input v-model="Editform.roleName" autocomplete="off"  disabled/>
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="Editform.remark" autocomplete="off" />
        </el-form-item>
        <el-form-item label="组织机构" :label-width="formLabelWidth" prop="roleOrg">
          <el-input v-model.trim="Editform.roleOrg" autocomplete="off" />
          <!-- <el-select v-model="Editform.institution" placeholder="下拉菜单" clearable >
            <el-option 
              v-for="item in category.institution"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="所需权限" :label-width="formLabelWidth" prop="permission">
          <el-input v-model.trim="Editform.permission" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer >
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogEditFormVisible = false;formReset(Editformref);" >返回</el-button>
          <el-button type="primary" @click="Editrolelist(Editformref)" >确认</el-button>
        </div>
      </template>
    </el-dialog>
  
  <!-- 查看对话框 -->
  <el-dialog v-model="dialogCheckFormVisible" title="角色查看" width="900" :show-close="false" style="text-align: left;">
      <el-form ref="Checkformref" :model="Checkform"  disabled>
        <el-row>
          <el-col :span="10" >
            <el-form-item label="角色名称" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.roleName" autocomplete="off"  />
            </el-form-item>
            <el-form-item label="角色描述" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.remark" autocomplete="off" />
            </el-form-item>
            <el-form-item label="组织机构" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.roleOrg" autocomplete="off" />
            </el-form-item>
            <el-form-item label="所需权限" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.permission" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="10" >
            <el-form-item label="创建时间" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.createTime" autocomplete="off" />
            </el-form-item>
            <el-form-item label="创建人" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.createBy" autocomplete="off" />
            </el-form-item>
            <el-form-item label="更新时间" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.updateTime" autocomplete="off" />
            </el-form-item>
            <el-form-item label="更新人" :label-width="formLabelWidth" >
              <el-input v-model="Checkform.updateBy" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer common-buttons">
          <el-button type="primary" @click="dialogCheckFormVisible = false;formReset(Checkformref);" >返回</el-button>
          <el-button type="primary" @click="dialogCheckFormVisible = false;formReset(Checkformref);" >确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import {onMounted, ref, reactive } from "vue";
import { getroleSearch, addrole, updaterole, delrole, checkrole } from '@/api/system/role'
import store from '@/store'
import PageHeader from '@/components/page-header/index.vue';
import CommonTable from '@/components/common-table/index.vue';
import {
  Plus,
  Delete,
  Download,
  Promotion,
  Search,
  Setting
} from '@element-plus/icons-vue';
import { Page } from '@/components/common-table/type';
const state = reactive<any>({
  tableData: [],
});
const page = reactive<Page>({
  current: 1,
  pageSize: 20,
});
const total = ref<number>(0);
const loading = ref(false);
//表单
const formtable = reactive({
  rolename: "",
  institution: "",
});

onMounted(() => {
  onQuery({ pageNo: 1 });
});

//表单重置
const onReset = () => {
  formtable.rolename='';
  formtable.institution='';
  onQuery({ pageNo: 1 });
};
//列项重置
const columnvisible = ref(false);
const showColumn = reactive({
  rolename: true,
  description: true,
  power: true,
  institution: true,
  operator: true,
});
// //表单分类
// const category = ref({
//   rolename:null,
//   institution:null,
//   power:null
// });
// // //角色分类异步调用
// const roleCategoryList = async() =>{
//   let result = await getroleCategory();
//   category.value = result.data;
// };
// roleCategoryList();

//表单条件搜索 
const onQuery= async(val:any) =>{
  let params = {
    pageNo:page.current,
    pageSize:page.pageSize,
    roleName:formtable.rolename?formtable.rolename:null,
    roleOrg:formtable.institution?formtable.institution:null,
    ...val,
  }
  loading.value = true;
  let result = await getroleSearch(params);
  loading.value = false;
  total.value=result.data.totalRows;
  state.tableData=result.data.rows;
};

//添加对话框
const dialogAddFormVisible = ref(false);
const formLabelWidth = '100px';
const Addformref = ref<FormInstance>()
const Addform = ref<any>({
});
//表单重置
const formReset = (formEl:FormInstance) => {
  if (!formEl) return
  formEl.resetFields()
  onQuery({ pageNo: 1 });
};

//提交验证
const submitForm = (formEl: FormInstance) => {
  let x = formEl.validate((valid:any) => {
  })
  return x
}

const ondialogAddFormVisible = () => {
  Addform.value.createBy= store.getters['user/token'];
  dialogAddFormVisible.value = true;
};

const addrules = {
  roleName: [{ required: true, message: '请输入', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入', trigger: 'blur' }],
  permission: [{ required: true, message: '请输入', trigger: 'blur' }],
  roleOrg: [{ required: true, message: '请输入', trigger: 'blur' }]
}

const addrolelist = async(formEl:FormInstance) =>{
  let x = await submitForm(formEl)
  if(!x){
    return;
  }
  let params = { ...Addform.value}
  let result = await addrole(params);
  ElMessage.success('添加成功');
  dialogAddFormVisible.value=false;
  formReset(formEl)
};

//修改
const dialogEditFormVisible = ref(false);
const Editformref = ref<FormInstance>()
const Editform = ref<any>({
});

const onEdit = (row:any) =>{
  Editform.value = row;
  Editform.value.updateBy = store.getters['user/token'];
  dialogEditFormVisible.value = true;
};

const Editrules = {
  remark: [{ required: true, message: '请输入', trigger: 'blur' }],
  permission: [{ required: true, message: '请输入', trigger: 'blur' }],
  roleOrg: [{ required: true, message: '请输入', trigger: 'blur' }],
}

const Editrolelist = async(formEl:FormInstance) =>{
  let x = await submitForm(formEl)
  if(!x){
    return;
  }
  let params = { ...Editform.value }
  let result = await updaterole(params);
  ElMessage.success('修改成功');
  dialogEditFormVisible.value=false;
  formReset(formEl);
};
//查看
const dialogCheckFormVisible = ref(false);
const Checkformref = ref<FormInstance>()
const Checkform = ref<any>({
});

const onCheck = async(row:any) =>{
  dialogEditFormVisible.value=false;
  let params = {
    roleId:row.id
  }
  let result = await checkrole(params);
  Checkform.value = result.data;
  dialogCheckFormVisible.value = true;
};

//删除
const onDelete = (row:any) => {
  ElMessageBox.confirm(
    '确定要删除此角色分类信息吗?',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      let params = {
        roleId:row.id
      }
      let result = await delrole(params);
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      onQuery({ pageNo: 1 });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '用户取消删除',
      })
    })
}

</script>
<style  lang="scss" scoped>
@import '@/assets/style/buttons';
.role-contain {
  .search {
    display: flex;
    :deep() {
      .el-input--small .el-input__wrapper {
        margin-right: 10px;
      }
    }
  }

  .layout-container-table {
    .el-button--small {
      background: transparent;
      color: rgba(24, 81, 237, 1);
    }
  }
  .search .span1{
    display: inline-block;
    width: 80px;
    margin: auto;
    font-size:14px;
    text-align: center;
  }
  .search .el-input{
    width: 200px;
    margin: auto;
  }
  .search .el-button {
    background: rgb(1, 18, 90);
    border: 0;
  }

  :deep() {
    .el-dialog__body {
      padding: 10px 20px;
    }
  }
  
}

</style>